<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .drag-content{
            float: left;
            margin-top:20px ;
            margin-right: 50px;
            width: 200px;
            border: 1px solid #110dedee;
            height: 500px;
            padding: 10px;
        }
        .drag-item{
            width: 200px;
            height:20px;
            margin: 10px 0;
        }
        .drop-content{ 
            float: left;
            width: 200px;
            padding: 10px;
            border: 1px dashed #f3953d;
            height: 500px;
        }
        #drag-item1{background-color: #afc018;}
        #drag-item2{background-color: #3cd022;}
        #drag-item3{background-color: #1eec88;}
        #drag-item4{background-color: #29c018;}
        #drag-item5{background-color: #2748be;}
        #drag-item6{background-color: #18aac0;}
        #drag-item7{background-color: #f0841e;}
    </style>
</head>
<body>
    <div class="drag-content">
        <div class="drag-item" id="drag-item1" draggable="true">1</div>
        <div class="drag-item" id="drag-item2" draggable="true">2</div>
        <div class="drag-item" id="drag-item3" draggable="true">3</div>
        <div class="drag-item" id="drag-item4" draggable="true">4</div>
        <div class="drag-item" id="drag-item5" draggable="true">5</div>
        <div class="drag-item" id="drag-item6" draggable="true">6</div>
        <div class="drag-item" id="drag-item7" draggable="true">7</div>
    </div>
    <div class="drop-content"></div>
</body>
<script>
    document.addEventListener('dragover',(e)=>{
        e.preventDefault()
    })
    document.addEventListener('dragstart',(e)=>{
        e.dataTransfer.setData('a',e.target.id)
       
    })
    document.addEventListener('drop',e=>{
        console.log(e.target);
        if(e.target.className == 'drop-content' ||e.target.className == 'drag-content'){
            //只有在drop事件才能获取数据
             var id = e.dataTransfer.getData('a')
        var ele = document.getElementById(id)
        e.target.appendChild(ele)
        }
        if(e.target.className == 'drag-item'){
            var id = e.dataTransfer.getData('a')
           var ele = document.getElementById(id)
           console.log( e.target.parentNode);
           e.target.parentNode.insertBefore(ele,e.target)
        }
    })
    
</script>
</html>